<!-- 新增样品弹出框 -->
<template>
  <a-modal
    width="1000px"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 添加样品 </template>
    <div class="container">
      <div class="content">
        <a-space :size="30">
          <a-button
            type="outline"
            @click="addOrEdit('main')"
            style="background-color: rgba(61, 126, 255, 0.09803921568627451)"
          >
            <template #icon> <icon-plus /> </template>新增主分类</a-button
          >
          <div style="display: flex">
            <a-space>
              <div>物料编码：</div>
              <a-input-search
                v-model="codeVal"
                placeholder="请输入物料编码"
                search-button
              />
            </a-space>
          </div>
          <div style="display: flex">
            <a-space>
              <div>物料名称：</div>
              <a-input-search
                v-model="nameVal"
                placeholder="请输入物料名称"
                search-button
              />
            </a-space>
          </div>
          <div>
            <a-space>
              <a-button type="primary" @click="search">
                <template #icon> <icon-search /> </template>搜索</a-button
              >
              <a-button @click="reset">
                <template #icon> <icon-sync /> </template>重置</a-button
              >
            </a-space>
          </div>
        </a-space>
      </div>
      <div class="content">
        <a-table
          row-key="id"
          :data="Data"
          :row-selection="rowSelection"
          v-model:selectedKeys="selectedKeys"
          :scroll="scroll"
          :pagination="pagination"
          @page-change="pageChange($event)"
          @page-size-change="pageSizeChange($event)"
          @select="onSelect"
        >
          <template #columns>
            <a-table-column title="物料编码" data-index="code" align="center">
            </a-table-column>
            <a-table-column title="物料名称" data-index="name" align="center">
            </a-table-column>
            <a-table-column title="规格型号" data-index="spec" align="center">
            </a-table-column>
            <a-table-column
              title="主计量单位"
              data-index="purchaseUnitName"
              align="center"
            >
            </a-table-column>
            <a-table-column
              title="物料/产品"
              data-index="materialName"
              align="center"
            >
            </a-table-column>
            <a-table-column
              title="分类"
              data-index="materialName"
              align="center"
            >
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect } from 'vue';
  import uniqueid from 'lodash.uniqueid';
  import dayjs from 'dayjs';
  import {
    GetMaterialList,
    PostMaterialList,
  } from '@/api/inventory-management/material-management';

  const scroll = {
    x: 2000,
  };
  // 分页配置
  const pagination = reactive({
    total: 0,
    showTotal: true,
    showJumper: true,
    showPageSize: true,
  });

  // 选择器配置
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });

  interface ParamsType {
    pageIndex: number;
    pageSize: number;
    number: string;
    clientCompanyName: string;
    status: number[];
    startTime: string;
    endTime: string;
  }
  const demandListParams = reactive<ParamsType>({
    pageIndex: 0,
    pageSize: 10,
    number: '',
    clientCompanyName: '',
    status: [],
    startTime: '',
    endTime: '',
  });

  let tableRef = ref();

  let codeVal = ref(''); // 物料编码搜索值
  let nameVal = ref(''); // 物料编码搜索值

  const selectedKeys = ref();
  let currType = ref(''); // 判断是新增主分类还是子分类
  const currForm = reactive({
    list: {},
  });
  const pageData = reactive({
    page: 0,
    size: 10,
  });

  // 获取列表数据
  const Data = ref();
  const getData = async () => {
    try {
      const data: any = {};
      if (codeVal.value !== '') data.code = codeVal.value;
      if (nameVal.value !== '') data.name = nameVal.value;
      const res = await GetMaterialList({
        ...pageData,
        ...data,
      });
      Data.value = res.content;
      pagination.total = res.pageable.totalItems;
    } catch (error: unknown) {
      console.log(error);
    }
  };
  getData();
  // 数据条数改变时触发
  const pageSizeChange = (pageSize: number) => {
    demandListParams.pageSize = pageSize;
    getData();
  };
  //页码改变时触发
  const pageChange = (pageIndex: number) => {
    pageData.page = pageIndex > 1 ? pageIndex : 1;
    getData();
  };

  const SelectDate = ref([]);
  const onSelect = (e, keys, val: any) => {
    const index = SelectDate.value.findIndex((item) => {
      return item.id === keys;
    });
    if (index === -1) {
      SelectDate.value.push(val);
    } else {
      SelectDate.value.splice(index, 1);
    }
  };

  const props = withDefaults(
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'addSmpleDetails']);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  let form = ref({
    name: '',
    model: '',
    spec: '',
    singlePrice: '',
    singleUint: '',
    amount: '',
    number: '',
  });

  const rules = reactive({});

  // 确定
  const handleOk = async () => {
    emit('addSmpleDetails', SelectDate.value);
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
